<template>
  <nw-PageTitle :title="$t('system.upgradeManage')" isBack />
  <nw-PageContainer>
    <scroll-view class="scroll-content" scroll-y enable-flex>
      <view class="ul">
        <view class="li">
          <view class="li-left">
            <view class="title">自动下载</view>
            <view class="content">自动下载可用版本</view>
          </view>
          <view class="li-right">
            <nw-Switch v-model="value1"></nw-Switch>
          </view>
        </view>
        <view class="li">
          <view class="li-left">
            <view class="title">自动升级</view>
            <view class="content">
              下载后自动升级，关闭则需要手动确认是否升级
            </view>
          </view>
          <view class="li-right">
            <nw-Switch v-model="value2"></nw-Switch>
          </view>
        </view>
        <view class="li">
          <view class="li-left">
            <view class="title">检测版本</view>
          </view>
          <view class="li-right">
             <nw-Button
                size="mini"
                text="开始检测"
                @click="handleCheckVersion"
              ></nw-Button>
          </view>
        </view>
      </view>
    </scroll-view>
  </nw-PageContainer>
</template>

<script setup>
import useCheckVersion from '../../../mixins/useCheckVersion'

const { checkVersion, donwLoadVersion} = useCheckVersion()

const value1 = ref(false)
const value2 = ref(false)

onMounted(_ => {
  // getDataList() 
})

const handleCheckVersion = async () => {
  const res = await checkVersion()
  if (res) {
    uni.showModal({
      title: '提示！',
      content: `最新版本为 ${res.version} ，需要升级吗？`,
      success: (res) => {
        if (res.confirm) {
           donwLoadVersion()
        }
      }
    })
  } else {
    g_utils.showToast('暂无新版本！')
  }
}

</script>

<style lang="scss" scoped>
.ul {
  margin: 20rpx;
  box-sizing: border-box;
  background-color: var(--bg-color);
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(6, 29, 23, 0.03);
  border-radius: 18rpx;
  .li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 38 * 2rpx;
    margin: 0 22rpx;
    + .li {
      border-top: 1rpx solid var(--border-color);
    }
    .li-left {
      display: flex;
      align-items: center;
      .title {
        font-size: 22rpx;
        font-weight: 400;
        color: var(--color-333);
      }
      .content {
        margin-left: 20rpx;
        font-size: 18rpx;
        font-weight: 400;
        color: var(--color-999);
      }
    }
  }
}
</style>
